<template>
  <div class="home-right">
    <div class="data-base box">
      <div class="month-picker-box">
        <el-select
          v-model="countType"
          placeholder="请选择"
          style="width: 70%"
          popper-class="time-picker"
          @change="initSelfBuildHouseInfo"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <moduleRight title="自建房信息">
        <div class="content">
          <div class="count-list">
            <div class="item">
              <span class="name">自建房屋数</span>
              <span class="num">{{ sbhCount.buildingTotals }}</span>
            </div>
            <div class="line"></div>
            <div class="item">
              <span class="name">监测感知数</span>
              <span class="num">{{ sbhCount.monitorTotals }}</span>
            </div>
            <div class="line"></div>
            <div class="item">
              <span class="name">报警数</span>
              <span class="num">{{ sbhCount.warnTotals }}</span>
            </div>
          </div>
          <div class="chart-content" id="selfBuildHinfo-chart"></div>
        </div>
      </moduleRight>
      <!-- <moduleRight title="综合数据库">
        <div class="circle">
          <img src="@/assets/image/img1.png" />
        </div>
        <div class="content">
          <div class="col1">
            <div class="item">
              <span>100</span>
            </div>
            <div class="text">
              <div class="yellow-tb"></div>
              <span>已走访人员(户)</span>
              <div class="yellow-bb"></div>
            </div>
          </div>
          <div class="col2">
            <div class="item">
              <span>200</span>
            </div>
            <div class="text">
              <div class="blue-tb"></div>
              <span>重点用户(户)</span>
              <div class="blue-bb"></div>
            </div>
          </div>
          <div class="col1">
            <div class="item">
              <span>600</span>
            </div>
            <div class="text">
              <div class="yellow-tb"></div>
              <span>已享受政策人数(户)</span>
              <div class="yellow-bb"></div>
            </div>
          </div>
        </div>
      </moduleRight> -->
    </div>
    <div class="person-list">
      <moduleRight title="自建房报警信息">
        <div class="content">
          <div class="table-box">
            <el-table
              :data="qxTable.data"
              :height="qxTable.total > qxTable.query.pageSize ? '83.6%' : '100%'"
              border
              class="table"
            >
              <el-table-column
                prop="shortText1726711428358"
                label="建筑名称"
                align="center"
                show-overflow-tooltip
                :tooltip-effect="'dark'"
              >
              </el-table-column>
              <el-table-column
                prop="dropdown1726708582066"
                label="倾斜"
                align="center"
                show-overflow-tooltip
                :tooltip-effect="'dark'"
              >
              </el-table-column>
              <el-table-column
                prop="value"
                label="区间增量"
                align="center"
                show-overflow-tooltip
                :tooltip-effect="'dark'"
              >
              </el-table-column>
            </el-table>
            <pagination
              v-show="qxTable.total > qxTable.query.pageSize"
              :total="qxTable.total"
              :page.sync="qxTable.query.currentPage"
              :limit.sync="qxTable.query.pageSize"
              @pagination="getSBHQxData"  
              :layout="'prev, pager, next'"
            />
          </div>
          <div class="table-box">
            <el-table
              :data="lfTable.data"
              :height="lfTable.total > lfTable.query.pageSize ? '83.6%' : '100%'"
              border
              class="table"
            >
              <el-table-column
                prop="shortText1726711428358"
                label="建筑名称"
                align="center"
                show-overflow-tooltip
                :tooltip-effect="'dark'"
              >
              </el-table-column>
              <el-table-column
                prop="dropdown1726708582066"
                label="裂缝"
                align="center"
                show-overflow-tooltip
                :tooltip-effect="'dark'"
              >
              </el-table-column>
              <el-table-column
                prop="value"
                label="区间增量"
                align="center"
                show-overflow-tooltip
                :tooltip-effect="'dark'"
              >
              </el-table-column>
            </el-table>
            <pagination
              v-show="lfTable.total > lfTable.query.pageSize"
              :total="lfTable.total"
              :page.sync="lfTable.query.currentPage"
              :limit.sync="lfTable.query.pageSize"
              @pagination="getSBHLfData"
              :layout="'prev, pager, next'"
            />
          </div>
          <!-- <div class="table-box">
            <el-table :data="tableData" height="100%" border class="table">
              <el-table-column prop="date" label="建筑名称" align="center">
              </el-table-column>
              <el-table-column prop="name" label="应变" align="center">
              </el-table-column>
              <el-table-column prop="address" label="区间增量" align="center">
              </el-table-column>
            </el-table>
          </div> -->
        </div>
      </moduleRight>
    </div>
  </div>
</template>

<script>
import { mixins } from "./js/mixins";
import {
  statisticsData,
  statisticsLineChartData,
  initSelfBuildHouseTable,
} from "@/api/index";
export default {
  name: "homeRight",
  mixins: [mixins],
  data() {
    return {
      options: this.$store.state.options,
      countType: 1,
      tableData: [],
      alarmList: [],
      sbhCount: {},
      qxTable: {
        query: {
          type: "倾斜",
          pageSize: 6,
          currentPage: 1,
        },
        data: [],
        total: 0,
      },
      lfTable: {
        query: {
          type: "裂缝",
          pageSize: 6,
          currentPage: 1,
        },
        data: [],
        total: 0,
      },
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.initSelfBuildHouseInfo();
      this.getSBHQxData();
      this.getSBHLfData();
    },
    initSelfBuildHouseInfo() {
      this.getSelfBuildHouseCount();
      this.initSelfBuildHouseChart();
    },
    // 获取自建房信息统计数
    getSelfBuildHouseCount() {
      statisticsData({ type: this.countType }).then((res) => {
        this.sbhCount = res;
      });
    },
    // 获取自建房图表信息
    initSelfBuildHouseChart() {
      statisticsLineChartData({ type: this.countType }).then((res) => {
        let list = res ?? [];
        let xdata = [];
        let ydata = [
          {
            name: "今日报警",
            data: [],
            color: "#B534FF",
          },
        ];
        list.forEach((item) => {
          xdata.push(item.monthOrDay);
          ydata[0].data.push(item.total);
        });
        this.setSelfBuildHouseInfo({ xdata, ydata }, "selfBuildHinfo-chart");
      });
      // let xdata = ["9.19", "9.20", "9.21", "9.22", "9.23", "9.24", "9.25"];
      // let ydata = [
      //   {
      //     name: "昨日报警",
      //     data: [40, 38, 32, 30, 28, 16, 43],
      //     color: "#FF4040",
      //   },
      //   {
      //     name: "今日报警",
      //     data: [25, 16, 43, 15, 25, 38, 32],
      //     color: "#B534FF",
      //   },
      // ];
    },
    // 获取自建房表格信息
    getSelfBuildHouseTable() {
      initSelfBuildHouseTable({
        type: "倾斜",
        pageSize: 10,
        currentPage: 1,
      }).then((res) => {
        this.shbTable1.data = res.data ?? [];
        this.shbTable1.total = res.totals;
      });
      initSelfBuildHouseTable({
        type: "裂缝",
        pageSize: 10,
        currentPage: 1,
      }).then((res) => {
        this.shbTable2.data = res.data ?? [];
        this.shbTable2.total = res.totals;
      });
    },
    // 获取自建房倾斜表格信息
    getSBHQxData() {
      initSelfBuildHouseTable(this.qxTable.query).then((res) => {
        this.qxTable.data = res.data ?? [];
        this.qxTable.total = res.totals;
      });
    },
    // 分页pageSize变化
    handleSizeChange1(val) {
      this.qxTable.query.pageSize = val;
      this.getSBHQxData();
    },
    // 分页pageNum变化
    handleCurrentChange1(val) {
      this.qxTable.query.currentPage = val;
      this.getSBHQxData();
    },
    // 获取自建房裂缝表格信息
    getSBHLfData() {
      initSelfBuildHouseTable(this.lfTable.query).then((res) => {
        this.lfTable.data = res.data ?? [];
        this.lfTable.total = res.totals;
      });
    },
     // 分页pageSize变化
     handleSizeChange2(val) {
      this.qxTable.query.pageSize = val;
      this.getSBHLfData();
    },
    // 分页pageNum变化
    handleCurrentChange2(val) {
      this.qxTable.query.currentPage = val;
      this.getSBHLfData();
    },
  },
};
</script>
<style scoped lang="scss">
.home-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .data-base {
    width: 100%;
    height: 37%;
    position: relative;
    .month-picker-box {
      width: 40%;
      position: absolute;
      left: 7%;
    }
    .content {
      height: 100%;
      // display: flex;
      // flex-direction: row;
      // justify-content: space-between;
      // color: #fff;
      // font-size: 0.13rem;

      .chart-content {
        margin-top: 1vh;
        height: calc(100% - 7vh);
      }

      .count-list {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          line-height: 3vh;
          .name {
            color: #fff;
            font-weight: 500;
            font-size: 0.14rem;
          }
          .num {
            color: #0ff;
            font-family: "YouSheBiaoTiHei";
            font-size: 0.26rem;
            font-style: normal;
            font-weight: 400;
          }
        }
        .line {
          width: 1px;
          height: 6vh;
          flex-shrink: 0;
          background: linear-gradient(
            0deg,
            rgba(0, 136, 255, 0) 0%,
            #08f 49.48%,
            rgba(0, 136, 255, 0) 98.96%
          );
        }
      }

      // .col1,
      // .col2 {
      //   display: flex;
      //   flex-direction: column;
      //   justify-content: center;
      //   align-items: center;
      //   .item {
      //     display: flex;
      //     justify-content: center;
      //     > span {
      //       color: #fff;
      //       text-align: center;
      //       font-family: "YouSheBiaoTiHei";
      //       font-size: 0.24rem;
      //       font-style: normal;
      //       font-weight: 400;
      //     }
      //   }
      //   .text {
      //     margin-top: 1.2vh;
      //     position: relative;
      //     text-align: center;
      //     padding: 0.25vh 0.4vw;
      //   }
      // }

      // .col1 {
      //   width: 28%;
      //   height: 80%;
      //   margin: 0 auto;
      //   .item {
      //     width: 4.5vw;
      //     height: 9vh;
      //     background: url("@/assets/image/icon1.png") no-repeat;
      //     background-size: 100% 100%;
      //     > span {
      //       text-shadow: 0px 2.791px 5.582px #fb0;
      //     }
      //   }
      //   .text {
      //     background: linear-gradient(
      //       90deg,
      //       rgba(0, 0, 0, 0) 0%,
      //       #4e3b01 46.97%,
      //       rgba(0, 0, 0, 0) 96.9%
      //     );
      //   }
      // }

      // .col2 {
      //   width: 35%;
      //   height: 100%;

      //   .item {
      //     margin-top: 50%;
      //     width: 5.5vw;
      //     height: 10vh;
      //     background: url("@/assets/image/icon2.png") no-repeat;
      //     background-size: 100% 100%;
      //     > span {
      //       text-shadow: 0px 2.791px 5.582px #06f;
      //     }
      //   }
      //   .text {
      //     background: linear-gradient(
      //       90deg,
      //       #000 0%,
      //       #01434e 46.97%,
      //       #000 96.9%
      //     );
      //   }
      // }
    }
  }
  .person-list {
    width: 100%;
    height: 62%;
    .content {
      height: calc(100% - 0px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .table-box {
        height: 49%;
      }
    }
  }
}
</style>
